import { ExternalLink } from 'lucide-react';
import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { t, tOpt } from '@/i18n';
import { isNotBuilt, isNotFound } from '@/lib/api';
import { apiExplore } from '@/lib/api-explore';
import { cn } from '@/lib/cn';
import { compact, formatDate, grouped } from '@/lib/format';
import { routes } from '@/lib/site';
import type { ImportRun, SourceIndicatorRow, SourceResponse } from '@/lib/types-explore';
import { DataTable, type DataTableColumn } from '@/components/data/data-table';
import { NotBuiltState } from '@/components/data/empty-state';
import { FreshnessBadge } from '@/components/data/freshness-badge';
import { Section } from '@/components/data/section';
import { ACTION_CLS, PageHeader } from '@/components/explore/page-header';
import { FooterCredits } from '@/components/layout/site-footer';

export const revalidate = 900;

type Params = { id: string };

async function load(id: string): Promise<SourceResponse | 'not-built' | null> {
  try {
    return await apiExplore.source(id, 60);
  } catch (e) {
    if (isNotFound(e)) return null;
    if (isNotBuilt(e)) return 'not-built';
    throw e;
  }
}

export async function generateMetadata({ params }: { params: Promise<Params> }): Promise<Metadata> {
  const { id } = await params;
  const data = await load(id);
  if (!data || data === 'not-built') return { title: t('source.notFound'), robots: { index: false } };
  const s = data.source;
  const title = t('source.title', { name: s.name ?? s.id });
  const description = t('source.description', { name: s.name ?? s.id, n: s.n_indicators ?? data.indicators.length, licence: s.licence ?? '' });
  return { title, description, alternates: { canonical: routes.source(s.id) }, openGraph: { title: `${title} — ${t('site.name')}`, description, url: routes.source(s.id), type: 'article' } };
}

function RunStatus({ status }: { status: string | null }) {
  const s = (status ?? '').toLowerCase();
  const label = tOpt(`source.run.${s}`, status ?? t('common.na'));
  return <span className={cn('inline-flex items-center rounded-sm border px-1.5 py-0.5 text-2xs font-medium', s === 'ok' ? 'border-rule text-ink-2' : s === 'partial' ? 'border-warn/40 text-warn' : s === 'failed' || s === 'quarantined' ? 'border-down/40 text-down' : 'border-rule text-ink-3')}>{label}</span>;
}

function duration(r: ImportRun): string {
  if (!r.started_at || !r.finished_at) return t('common.na');
  const s = (new Date(r.finished_at).getTime() - new Date(r.started_at).getTime()) / 1000;
  if (!Number.isFinite(s) || s < 0) return t('common.na');
  return s < 60 ? `${Math.round(s)} s` : `${Math.round(s / 60)} min`;
}

export default async function SourcePage({ params }: { params: Promise<Params> }) {
  const { id } = await params;
  const data = await load(id);
  if (data === null) notFound();
  if (data === 'not-built') return <NotBuiltState />;
  const s = data.source;
  const name = s.name ?? s.id;

  const indCols: DataTableColumn<SourceIndicatorRow>[] = [
    {
      key: 'indicator',
      header: t('source.series.indicator'),
      cell: (r) => (
        <Link href={routes.indicator(r.slug)} className="link-quiet inline-flex min-h-[32px] items-center text-ink">
          {r.name ?? r.slug}
        </Link>
      ),
    },
    { key: 'code', header: t('source.series.code'), cell: (r) => <code className="font-mono text-xs text-ink-2">{[r.dataset, r.series_code].filter(Boolean).join(' · ')}</code> },
    { key: 'priority', header: t('source.series.priority'), numeric: true, cell: (r) => (r.priority != null ? `#${r.priority}` : t('common.na')) },
    { key: 'coverage', header: t('source.series.coverage'), numeric: true, cell: (r) => (r.n_countries != null ? `${grouped(r.n_countries)} · ${r.n_observations != null ? compact(r.n_observations) : ''}` : t('common.na')) },
    { key: 'last', header: t('source.series.lastYear'), numeric: true, cell: (r) => r.last_year ?? t('common.na'), hideOnMobile: true },
    { key: 'status', header: t('source.series.status'), cell: (r) => <RunStatus status={r.last_status} /> },
  ];
  const runCols: DataTableColumn<ImportRun>[] = [
    { key: 'started', header: t('source.runs.started'), cell: (r) => <span className="tnum text-xs">{r.started_at ? `${formatDate(r.started_at)} ${r.started_at.slice(11, 16)}` : t('common.na')}</span> },
    { key: 'dataset', header: t('source.runs.dataset'), cell: (r) => <span className="break-all font-mono text-xs text-ink-2">{r.dataset}</span> },
    { key: 'status', header: t('source.runs.status'), cell: (r) => <RunStatus status={r.status} /> },
    { key: 'rows', header: t('source.runs.rows'), numeric: true, cell: (r) => (r.rows_valid != null ? grouped(r.rows_valid) : t('common.na')) },
    { key: 'warn', header: t('source.runs.warnings'), numeric: true, cell: (r) => (r.warnings != null ? grouped(r.warnings) : t('common.na')), hideOnMobile: true },
    { key: 'err', header: t('source.runs.errors'), numeric: true, cell: (r) => (r.errors ? <span className="text-down">{grouped(r.errors)}</span> : r.errors === 0 ? '0' : t('common.na')), hideOnMobile: true },
    { key: 'dur', header: t('source.runs.duration'), numeric: true, cell: (r) => duration(r), hideOnMobile: true },
  ];

  return (
    <>
      <PageHeader
        crumbs={[{ href: routes.sources(), label: t('sources.title') }]}
        eyebrow={s.organization}
        title={name}
        lede={s.attribution}
        meta={
          <>
            <code className="font-mono">{s.id}</code>
            {s.licence ? ` · ${s.licence}` : ''}
            {s.n_indicators != null ? ` · ${t('sources.indicators', { n: grouped(s.n_indicators) })}` : ''}
            {s.n_observations != null ? ` · ${t('sources.observations', { n: compact(s.n_observations) })}` : ''}
          </>
        }
        actions={
          s.url ? (
            <a href={s.url} target="_blank" rel="noopener noreferrer" className={ACTION_CLS}>
              <ExternalLink size={14} aria-hidden /> {t('source.open', { name })}
            </a>
          ) : null
        }
      />

      <section aria-label={t('source.freshness.title')} className="border-y border-rule">
        <dl className="grid grid-cols-1 gap-y-3 py-4 sm:grid-cols-3 sm:divide-x sm:divide-rule">
          <div className="sm:pr-4">
            <dt className="text-2xs font-medium uppercase tracking-wide text-ink-3">{t('source.freshness.sourceUpdated')}</dt>
            <dd className="tnum mt-1 text-base font-semibold text-ink">{formatDate(data.freshness.source_updated_at)}</dd>
          </div>
          <div className="sm:px-4">
            <dt className="text-2xs font-medium uppercase tracking-wide text-ink-3">{t('source.freshness.retrieved')}</dt>
            <dd className="tnum mt-1 flex flex-wrap items-center gap-2 text-base font-semibold text-ink">
              {formatDate(s.last_success_at ?? data.freshness.retrieved_at)} <FreshnessBadge retrievedAt={s.last_success_at ?? data.freshness.retrieved_at} />
            </dd>
          </div>
          <div className="sm:pl-4">
            <dt className="text-2xs font-medium uppercase tracking-wide text-ink-3">{t('source.freshness.built')}</dt>
            <dd className="tnum mt-1 text-base font-semibold text-ink">{formatDate(data.freshness.built_at)}</dd>
          </div>
        </dl>
      </section>

      <Section id="about" title={t('source.about')} className="border-t-0" tight>
        <dl className="grid gap-x-8 gap-y-2 text-sm sm:grid-cols-2">
          <div>
            <dt className="text-2xs font-medium uppercase tracking-wide text-ink-3">{t('sources.organisation')}</dt>
            <dd className="text-ink">{s.organization ?? t('common.na')}</dd>
          </div>
          <div>
            <dt className="text-2xs font-medium uppercase tracking-wide text-ink-3">{t('sources.licence')}</dt>
            <dd className="text-ink">{s.licence ?? t('common.na')}</dd>
          </div>
          <div>
            <dt className="text-2xs font-medium uppercase tracking-wide text-ink-3">{t('sources.attribution')}</dt>
            <dd className="text-ink">{s.attribution ?? t('common.na')}</dd>
          </div>
          <div>
            <dt className="text-2xs font-medium uppercase tracking-wide text-ink-3">{t('sources.apiBase')}</dt>
            <dd className="break-all font-mono text-xs text-ink">{s.api_base ?? t('common.na')}</dd>
          </div>
          {s.notes ? (
            <div className="sm:col-span-2">
              <dd className="text-ink-2">{s.notes}</dd>
            </div>
          ) : null}
        </dl>
      </Section>

      {data.datasets.length ? (
        <Section id="datasets" title={t('source.datasets.title')} subtitle={t('source.datasets.sub')} tight>
          <DataTable
            rows={data.datasets}
            rowKey={(d) => d.dataset ?? 'null'}
            caption={t('source.datasets.title')}
            columns={[
              { key: 'dataset', header: t('source.datasets.dataset'), cell: (d) => <span className="font-medium text-ink">{d.dataset ?? t('common.na')}</span> },
              { key: 'obs', header: t('source.datasets.observations'), numeric: true, cell: (d) => (d.n_observations != null ? grouped(d.n_observations) : t('common.na')) },
              { key: 'ind', header: t('source.datasets.indicators'), numeric: true, cell: (d) => (d.n_indicators != null ? grouped(d.n_indicators) : t('common.na')) },
              { key: 'cty', header: t('source.datasets.countries'), numeric: true, cell: (d) => (d.n_countries != null ? grouped(d.n_countries) : t('common.na')) },
              { key: 'years', header: t('source.datasets.years'), numeric: true, cell: (d) => (d.first_year && d.last_year ? `${d.first_year}–${d.last_year}` : t('common.na')) },
            ]}
          />
        </Section>
      ) : null}

      <Section id="series" title={t('source.series.title')} subtitle={t('source.series.sub', { n: grouped(data.indicators.length) })}>
        {data.indicators.length ? <DataTable rows={data.indicators} rowKey={(r) => `${r.slug}-${r.series_code}`} columns={indCols} caption={t('source.series.title')} dense /> : <p className="text-sm text-ink-3">{t('common.noDataLong')}</p>}
      </Section>

      <Section id="runs" title={t('source.runs.title')} subtitle={t('source.runs.sub', { n: grouped(data.import_runs.length) })}>
        {data.import_runs.length ? <DataTable rows={data.import_runs} rowKey={(r) => `${r.run_id}-${r.dataset}`} columns={runCols} caption={t('source.runs.title')} dense /> : <p className="text-sm text-ink-3">{t('source.runs.none')}</p>}
      </Section>

      <div className="border-t border-rule pt-4 text-sm text-ink-2">
        <span className="mr-2 font-medium text-ink">{t('sources.contact')}</span>
        <FooterCredits className="mt-1 inline text-xs" />
      </div>
    </>
  );
}